<template>
  <div class="nav_outer">
    <Header>设置</Header>
    <div class="content">
       <div class="flex_bet tabitem" @click="reset">
           <div class="tabli">
               <img src="../assets/img/lock@2x.png" alt="">
               <span>修改密码</span>
           </div>
           <span class="mui-icon mui-icon-arrowright"></span>
       </div>
       <div class="flex_bet tabitem" @click="getVersion">
           <div class="tabli">
               <img src="../assets/img/version.png" alt="" style="width:.6rem;">
               <span>版本更新(当前v{{version}})</span>
           </div>
           <span class="mui-icon mui-icon-arrowright"></span>
       </div>
       <div class="logout mjbtn" @click="logout">退出登录</div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/commonComponents/Header'
export default {
  data() {
    return {
        version:'2.0.0'
    }
  },
  created() {
    this.getCurrentVersion();
  },
  methods: {
    reset(){
        this.$router.push('/resetpass');
    },
    logout(){
        localStorage.clear();
        this.$store.commit('SETUSER', {});
        this.$router.replace('/index');
    },
    getVersion(){
        let that = this;
        this.app.getUpdateVersion().then(()=>{
            that.mui.toast('已是最新版本');
        })
    },
    getCurrentVersion(){
        let that = this;
        this.app.getAppVersion().then((res)=>{
            that.version = res;
        })
    }
  },
  components: {
    Header
  }
}
</script>

<style lang='scss' scoped>
    @function px2em($px) {
        @if (unitless($px)) {
        @return px2em($px + 0px);
        } @else if (unit($px) == em) {
        @return $px;
        }
        @return ($px / 75px) * 1rem;
    }
    body{
        background: #F5F5F5!important;
    }
    .content{
        .tabitem{
            padding: px2em(30);
            background: #fff;
            margin-top: 2px;
            .tabli>img{
                vertical-align: middle;
                width: px2em(36);
                margin-right: px2em(26);
            }
        }
        .logout{
            height: px2em(80);
            border-radius: px2em(40);
            line-height: px2em(80);
            width: px2em(600);
            margin: px2em(60) auto;
        }
    }
</style>
